import React from 'react'
import {Col, Row,Icon} from "antd";

import {WeaLocaleProvider,WeaInput} from "ecCom";
const getLabel = WeaLocaleProvider.getLabel;
import {WeaPortalShare,WeaMaterialLib} from 'weaPortalPublic';

export default class AddExtends extends React.Component{
    render(){
        const {setting,setSetting} = this.props
        const {url='',video} = setting

        return (
            <div>
                <div className="set-item">
                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@w2dzaj`} type="flex" middle="middle">
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@6pxmc4`} span={6} >
                            <div className="item-title">{ '视频链接'} :</div>
                            <div className="middle-box"></div>
                        </Col>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@m4jjvy`} span={18}>
                            <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@ra27me`} value={video} viewAttr={2} onChange={value => setSetting({"video": value})}/>
                        </Col>
                    </Row>
                </div>
                <div className="set-item">
                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@ty1age`} type="flex" middle="middle">
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@10a5sm`} span={6} >
                            <div className="item-title">{getLabel(128143, '视频')} :</div>
                            <div className="middle-box"></div>
                        </Col>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@dlrl1g`} span={18}>
                            {
                                video ? (
                                    <div className="e9desktop-menu-add-img-edit">
                                        <WeaMaterialLib ecId={`${this && this.props && this.props.ecId || ''}_WeaMaterialLib@a2ob71`} multiCheck={false} onChange={(value)=>{ setSetting({"video":value})}} type='button' >
                                            <video src={video } className="e9desktop-menu-add-img-edit-img" title={ '更换视频'}/>
                                        </WeaMaterialLib>
                                        <div className="e9desktop-menu-add-img-edit-del" title={'删除视频'}>
                                            <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@gkac3g`} type="cross" onClick={() => setSetting({"video": ''})}/>
                                        </div>
                                    </div>
                                ) : (
                                    <div className="e9desktop-menu-add-img-add">
                                        <WeaMaterialLib ecId={`${this && this.props && this.props.ecId || ''}_WeaMaterialLib@ae67k6`} multiCheck={false} onChange={(value)=>{ setSetting({"video":value})}} type='button' >
                                            <div className="e9desktop-menu-add-img-add-icon" title={ '添加视频'}>
                                                <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@lsqd09`} type="plus"/>
                                            </div>
                                        </WeaMaterialLib>
                                    </div>
                                )
                            }
                        </Col>
                    </Row>
                </div>
            </div>
        )
    }
}